import type { GoogleElements } from '../../../../../../../../types/constants/personalization/google'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class GoogleWebPage {
  elements: GoogleElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GOOGLE]
  private static instance: GoogleWebPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): GoogleWebPage {
    if (!GoogleWebPage.instance) {
      GoogleWebPage.instance = new GoogleWebPage()
    }
    return GoogleWebPage.instance
  }

  init(): void {
  }

  contentStyles(): string {
    return `
    div[jscontroller] {
      background-color: var(${this.themeVarService.search.resultItem.background}) !important;
      color: var(${this.themeVarService.search.default.text}) !important;
      
      /* 去掉标题下划线 */
      a:has(> h3) {
        &:hover {
          h3 {
            text-decoration: none !important;
          }
        }
      }
      
      /* 标题*/
      h3 {
        color: var(${this.themeVarService.link.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.textHover}) !important;
        }
      }
      
      /* 描述 */
      span, div {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      cite {
        span {
          color: var(${this.themeVarService.search.default.textNeutral}) !important;
        }
      }
      
      em {
        color: var(${this.themeVarService.em.text}) !important;
      }
      
      div:has(> a[hreftranslate]) {
        background: transparent !important;
      }
    }
    `
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  getMainStyles(): string {
    return `
/* 隐藏样式 */
#main #cnt #rcnt #search #rso div[jscontroller]:has(${generateHideSelector(`.${AppStyleCollections.Google.LINK_CONTAINER}`)}) {
  br {
    display: none !important;
  }
  
  h3 {
    padding-top: 0 !important;
    margin: 0 !important;
  }
}    

#main {
  #rcnt {
    padding-top: ${this.themeVarService.search.resultItem.gap} !important;
    padding-bottom: ${this.themeVarService.search.resultItem.gap} !important;

    > div {
      display: block !important;
      margin: 0 !important;
      
      &:has(#m-x-content) {
        background-color: white !important;
      }
    }
    
    #search {
      /* 搜索结果列表一 */
      #rso {
        ${this.searchCommonStyles.resultContainerStyles({ fullWidth: false })}
        
        /* 非结果项 */
        > div:not(:has(div[jscontroller])) {
          display: none !important;
        }

        /* 结果项 */
        > div:has(div[jscontroller]) {
          ${this.searchCommonStyles.resultItemStyles({ overflowHide: false, noMarginBottom: true })}
          
          > div {
            background-color: transparent !important;
          }
          
          /* 非结果项 */
          > span {
            display: none !important;
          }
          
          /* 结果标签列表 */
          div[role="list"] {
            a {
              div {
                border-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
              }
            }
          }
          
          ${this.contentStyles()}
        }
      } 
    }
  }
}
    `
  }
}
